<!-- 个人中心 -->
<template>
	<view class="Me">
		<u-navbar bgColor="#7bb7fd" leftIconColor="#7bb7fd" :placeholder="true">
			<view class="nav-center-slot" slot="center">个人中心</view>
			<view class="nav-right-slot" slot="right">欢迎:XXX</view>
		</u-navbar>
		<!-- 头像 -->
		<u--image class="_image" :showLoading="true" :src="require('@/assets/avatar/00fb2f5b2c9a39a8012034f76e8c48.jpg')" width="100px" height="100px"></u--image>
		<!-- 宫格 -->
		<u-grid :border="false" col="4" class="grid">
			<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
				<text class="grid-text">{{ listItem.title }}</text>
			</u-grid-item>
		</u-grid>

		<u-cell-group>
			<u-cell icon="account-fill" title="用户名" value="xiaoming"></u-cell>
			<u-cell icon="chat-fill" title="昵称" :value="userInfo.name"></u-cell>
			<u-cell icon="phone-fill" title="手机号" value="13212341234"></u-cell>
		</u-cell-group>
		<u-button type="error" text="退出登录" class="btn"></u-button>

		<!-- 底部选项卡 -->
		<xrzp-FootTabbar></xrzp-FootTabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			list: [
				{
					name: 'star-fill',
					title: '收藏'
				},
				{
					name: 'chat-fill',
					title: '客服'
				},
				{
					name: 'shopping-cart-fill',
					title: '购物车'
				},
				{
					name: 'rmb-circle-fill',
					title: '钱包'
				}
			]
		};
	},
	computed: { ...mapState(['userInfo'])},
	methods: {}
};
</script>

<style lang="scss" scoped>
.Me {
	.nav-center-slot {
		font-size: 34rpx;
		font-weight: bold;
	}

	.nav-right-slot {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
	}

	._image {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
	}
  .grid{
    margin: 40rpx 0;
		.u-icon{
			margin-bottom: 16rpx;
			::v-deep .u-icon__icon{
				font-size: 56rpx !important;
				line-height: 56rpx !important;
			}
		}
  }
	.btn {
		margin-top: 40rpx;
		width: 95vw;
	}
}
</style>
